/*
描述：搜索页面视图组件，负责处理搜索关键词并展示搜索结果
完成人：何艺珲
完成时间: 2025/04/26
*/


<script setup lang="ts">
import {defineProps, ref, watch} from "vue";

// 导入所有组件
import SearchComponent from '../components/SearchView/SearchComponent.vue';
import HeaderComponent from "../components/HomeView/HeaderComponent.vue";



const searchInput = ref('');


const props = defineProps<{
  searchInput: string;
}>();

watch(() => props.searchInput, (newVal) => {
  console.log('currentComponent changed to:', newVal);
  searchInput.value = newVal;
});
</script>

<template>
  <el-container>
    <HeaderComponent /> <!-- 使用 HeaderComponent -->
    <el-container>
      <el-aside width="20%" style="height: 100vh">
      </el-aside>
      <el-main class="body">
        <SearchComponent :searchInput="searchInput"/>
      </el-main>
      <el-aside width="20%">
      </el-aside>
    </el-container>
  </el-container>
</template>

<style scoped>

*{
  background-color: #F9FAFA;
}


.body{
  height: 100%;
  padding: 0 20px 20px 20px;
}

.logo span{
  background-color: white;
  margin-left: 7px;
  font-size: 20px;
  color: #BCBBBB;

}


</style>
